<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .zt{
        
        height: 400px;
        background-color: rgb(23, 156, 45);
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .shoubiao{
        background-color: white;
        background-image: url(https://oss.9ihub.com/test/1.png);
        width: 230px;
        height: 230px;
        background-repeat: no-repeat;
        transition: transform 0.8s ease;
        
    }
    .shoubiao:hover{
        transform:scale(1.1);
        box-shadow: 0px 0px 10px rgb(80, 79, 79);
    }
    /* 2 */
    .pingmu{
        background-color: white;
        background-image: url(https://oss.9ihub.com/test/2.png);
        width: 220px;
        height: 220px;
    }
    
    .tu1{
        width: 220px;
        height: 220px;
        overflow: hidden;
    }
    .div1{
        width: 220px;
        height: 40px;
        background-color: orange;
    }
    .div1,.pingmu{
        transition: transform 1s ease;
    }
    .pingmu:hover + .div1{
        transform: translateY(-40px);
        box-shadow: 0px 0px 10px rgb(80, 79, 79);

    }
    .pingmu:hover{
        transform: translateY(-5px);
        box-shadow: 0px 0px 10px rgb(80, 79, 79);

    }
    /* 2 */
    .shouji{
        background-color: white;
        background-image: url(https://oss.9ihub.com/test/3.jpg);
        width: 230px;
        height: 270px;
        background-repeat: no-repeat;
    }
    .tu2{
        width: 220px;
        height: 270px;
        overflow: hidden;
    }
    .div2{
        width: 220px;
        height: 40px;
        background-color: orange;
    }
    .div2,.shouji{
        transition: transform 1s ease;
    }
    .shouji:hover + .div2{
        transform: translateY(-40px);
    }
    .shouji:hover{
        transform: translateY(-5px);
    }

</style>
<body>
    <div class="zt">
        <div class="shoubiao"></div>
        <div class="tu1">
            <div class="pingmu"></div> 
            <div class="div1"></div>
        </div>
        <div class="tu2">
            <div class="shouji"></div>
            <div class="div2"></div>
        </div>
    </div>
    <div class="qwe">
        <div class="i2"></div>
        <div class="0"></div>
    </div>
</body>
</html>